<template>
	<view class="chart_box">
		<view class="chart_container">
			<view class="head">
				<!-- <image class="w-70rpx" src="@/static/icon/sleep.svg" mode="widthFix"></image>
        <text class="title">睡眠</text>
        <image
            class="right-arrow-icon"
            src="/static/icon/right.svg"
            mode="widthFix"
            @click="gotoDataPage"
        ></image> -->
				<view class="left">
					<image class="img-tz" src="../../../../static/ring/chart/shuimian.png" mode=""></image>
					<image class='img-tip' src="../../../../static/ring/tipinfo.png" mode=""></image>
				</view>
				<image class="right-arrow-icon" src="/static/icon/right.svg" mode="widthFix" @click="gotoDataPage">
				</image>
			</view>
			<text class="refresh-tip">今日睡眠满足度为{{sleepRatioPercent}}。</text>

			<table>
				<tr>
					<td rowspan="2" colspan="2" class="sleep-time-cell" style="vertical-align: middle;">
						<text style="font-size: 14px; color: #6F87FF; ">实际睡眠时长
							{{actualSleepHours}}h {{actualSleepMinutes}}min</text>
					</td>
					<td rowspan="4" class="image-cell">
						<image src="/static/health/line.svg" mode="widthFix" style="width: 100%;"></image>
					</td>
					<td rowspan="4" class="progress-cell">
						<view class="progress-container">
							<canvas class="progress-circle" canvas-id="sleepProgress"></canvas>
							<text class="progress-percentage">{{ sleepRatioPercent }}</text>
						</view>
					</td>
				</tr>
				<tr></tr>
				<tr>
					<td rowspan="2" colspan="2" class="sleep-time-cell" style="vertical-align: middle;">
						<text style="font-size: 14px; color: #666666; ">推荐睡眠时长
							{{recommendedSleepHours}}h {{recommendedSleepMinutes}}min</text>
					</td>
				</tr>
				<tr></tr>
			</table>
		</view>
	</view>
</template>

<script>
	import {
		queryMySleepInfoByDay
	} from "@/api/ring/chart.js";
	import dayjs from "dayjs";
	import store from "@/store/index.js";
	import UTable from "../../../../uni_modules/uview-ui/components/u-table/u-table.vue";
	import UTr from "../../../../uni_modules/uview-ui/components/u-tr/u-tr.vue";

	export default {
		components: {
			UTr,
			UTable
		},
		props: {
			date: String,
		},
		data() {
			return {
				actualSleepHours: '--',
				actualSleepMinutes: '--',
				recommendedSleepHours: '--',
				recommendedSleepMinutes: '--',
				sleepRatio: 0,
				sleepRatioPercent: '--%'
			};
		},

		computed: {
			isLogin() {
				return store.state.userToken;
			},
		},

		methods: {
			getTitle() {
				return 'sleep';
			},

			gotoDataPage() {
				const date = dayjs().format("YYYY-MM-DD");
				// 如果是今天 且同步时间不同 意味着今天没有对应的同步数据
				uni.navigateTo({
					url: `/pages/ring/detail/index?type=Sleep&title=睡眠&date=` + date
				});
			},
			updateChartData(date) {
				if (!this.isLogin) return;
				if (!date || date == 'Invalid Date') {
					date = dayjs().format("YYYY-MM-DD HH:mm:ss");
				}
				console.log("queryMySleepInfoByDay == date ==>", date);
				const isToday = dayjs().isSame(dayjs(date), "day");
				if (isToday && this.lastTime) {
					date = this.lastTime;
				}
				queryMySleepInfoByDay({
						dateStr: dayjs(date).format("YYYY-MM-DD") || dayjs().format("YYYY-MM-DD"),
						offsetMinutes: new Date().getTimezoneOffset(),
					})
					.then(async (res) => {
						console.log("queryMySleepInfoByDay", res.data);

						const sleepData = res.data;

						let totalMinutes = res.data.totalMinute;
						// actualSleepHours: '--',
						// actualSleepMinutes: '--',
						// recommendedSleepHours: '--',
						// recommendedSleepMinutes: '--',
						// sleepRatio: 0,
						// sleepRatioPercent: '--%'
						this.actualSleepHours = (totalMinutes / 60).toFixed(0)
						this.actualSleepMinutes = totalMinutes % 60
						this.recommendedSleepHours = 8
						this.recommendedSleepMinutes = 8
						this.sleepRatio = (totalMinutes / 488).toFixed(2)
						this.sleepRatioPercent = this.sleepRatio * 100 + "%"
						this.drawProgressCircle()
					})
					.catch((error) => {
						console.log("sleep Data error", error);
					});
			},
			showTips() {
				uni.showToast({
					title: "这里是体征数据的相关说明内容",
					icon: "none",
				});
			},
			drawProgressCircle() {
				const ctx = uni.createCanvasContext('sleepProgress', this);
				const width = 100; // 画布宽度
				const height = 100; // 画布高度
				const radius = 40; // 圆的半径
				const centerX = width / 2;
				const centerY = height / 2;

				// 绘制灰色背景圆
				ctx.beginPath();
				ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
				ctx.setStrokeStyle('#ccc');
				ctx.setLineWidth(10);
				ctx.stroke();

				// 绘制进度条
				ctx.beginPath();
				ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + 2 * Math.PI * this.sleepRatio);
				ctx.setStrokeStyle('#6F87FF');
				ctx.setLineWidth(10);
				ctx.stroke();

				ctx.draw();
			}
		},

		mounted() {
			this.updateChartData();
		}
	};
</script>

<style lang="scss" scoped>
	.chart_box {
		width: 100%;
		//height: 100%;
		color: black;

		.w-70rpx {
			width: 48rpx;
		}

		.w-40rpx {
			width: 40rpx;
		}

		.chart_container {
			padding: 20rpx 30rpx;

			.head {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				margin-bottom: 8rpx;

				.left {
					flex: 1;
					display: flex;
					align-items: center;

					.img-tz {
						width: 104rpx;
						height: 44rpx;
						margin-right: 12rpx;
					}

					.img-tip {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.right-arrow-icon {
					width: 20rpx;
					height: 20rpx;
				}
			}

			.refresh-tip {
				font-size: 24rpx;
				color: #999999;
				margin-top: 8rpx;
				margin-bottom: 16rpx;
			}

			table {
				border-collapse: collapse;
				width: 100%;
			}

			td {
				padding: 5px;
			}

			.sleep-time-cell {
				width: 45%;
			}

			.image-cell {
				width: 30%;
			}

			.progress-cell {
				width: 25%;
			}

			.progress-circle {
				width: 100px;
				height: 100px;
			}

			.progress-container {
				position: relative;
				width: 100px;
				height: 100px;
				margin: 0 auto;
			}

			.progress-percentage {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 16px;
				color: #6F87FF;
			}
		}
	}

	/* 外层卡片 */
	.vital-signs-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		margin: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* 头部区域 */
	.vital-header {
		display: flex;
		flex-direction: column;
		margin-bottom: 12rpx;
	}

	.vital-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #ff5722;
		margin-bottom: 4rpx;
	}

	.vital-time {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.refresh-desc {
		font-size: 22rpx;
		color: #666;
	}
</style>